<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
            body{
                margin: 0px;
                padding: 0px;
            }
            .content-item{
				width : 150px;
				height: 150px;
			}
			/* 在css中设置 row */
			.content{
                margin: 200px auto;
				width  : 800px;
				height : 600px;
				background-color:#F1F1F1;
                border-radius: 5px;
                padding: 20px;
                /* 弹性布局 */
                display: flex;

                /* justify-content属性定义了项目在主轴上的对齐方式。 */
                /* （默认值）：左对齐 */
                /* justify-content:flex-start; */
                /* 右对齐 */
                /* justify-content:flex-end; */
                /* 每个项目两侧的间隔相等。 */
                justify-content:space-around;
                /* 居中 */
                /* justify-content:center;  */
                /* 两端对齐，项目之间的间隔都相等。 */
                /* justify-content:space-between; */

                /* 主轴为水平方向，起点在左端。 */
                /* flex-direction:row; */
                /* 主轴为水平方向，起点在右端。 */
                /* flex-direction:row-reverse; */
                /* 主轴为垂直方向，起点在上沿。 */
                /* flex-direction:column; */
                /* 主轴为垂直方向，起点在下沿。 */
                /* flex-direction:column-reverse; */

                /* flex-wrap属性决定了如果一条轴线排不下，如何换行。 */
                /* （默认值）：不换行 */
                /* flex-wrap:nowrap; */
                /* 换行，第一行在上方 */
                /* flex-wrap:wrap; */
                /* 换行，第一行在下方。 */
                /* flex-wrap:wrap-reverse; */
				
			}
			.content-item{
				width : 150px;
				height: 150px;
			}
			.item1{
				background-color:aquamarine;
			}
			.item2{
				background-color:coral;
			}
			.item3{
				background-color:bisque;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="content-item item1"></div>
			<div class="content-item item2"></div>
			<div class="content-item item3"></div>						
		</div>
	</body>
	
</html>



